<template>
	<view>
		<custom-header title="操作日志" sticky />
		<view class="_wrap">
			
			<!-- 质检员 -->
			<view class="flower_info" v-if="role?.roleId == 1">
				<view class="title">
					<view class="title_text">花材信息</view>
					<view class="shelf_number">货架号 #01-027</view>
				</view>
				<view class="info">
					<view class="label">花材名称</view>
					<view class="value">
						蜜桃雪山（香槟） <text class="grade">A级</text>
					</view>
				</view>
				<view class="info">
					<view class="label">花材数量</view>
					<view class="value">
						8扎
					</view>
				</view>
				<view class="info">
					<view class="label">供应商家</view>
					<view class="value">
						柯苇花卉1
					</view>
				</view>
			</view>
			<!-- 打包员 / 发货员-->
			<view class="shelf_number_text" v-else>货架号 #01-027</view>
			
			
			
			<!-- 列表数据 -->
			<view
				class="no_data" 
				v-if="!listData.length && listLoading != 'loading'">
					<view class="text">暂无数据</view>
			</view>
			<!-- 表格区域 -->
			<view class="table-section" v-else-if="listData.length">
				<!-- 表头 -->
				<view class="table-header">
					<text class="header-cell operator">操作员</text>
					<text class="header-cell identity">身份</text>
					<text class="header-cell content">内容</text>
				</view>
			
				<!-- 数据行 -->
				<view class="table-body">
					<view class="table-row" v-for="(item, index) in listData" :key="index">
						<view class="table-cell operator">
							<view class="operatorName">{{ item.operator }}</view>
							<view class="createTime">{{ item.createTime }}</view>
						</view>
						<view class="table-cell identity">
							{{ item.identity }}
						</view>
						<view class="table-cell content">
							{{ item.content }}
						</view>
					</view>
				</view>
			</view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore 
					:status="listLoading" 
					iconSize="22"
					iconColor="#F5564D"  
					loadingIcon='semicircle'
					loadingText="" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive,computed,onMounted } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	// 获取角色
	const role = computed(()=>store.getters.role)
	
	
	// 列表数据
	const listData = ref([])
	const listLoading = ref('loadmore')
	const loadGetListData = () => {
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(() => {
			listLoading.value = 'loadmore'
			listData.value = [
				{
					operator: '全职配货吕琼燕',
					createTime: '2025-07-31 23:17:15',
					identity: '打包员',
					content:'天地盖大号天地盖大号天地盖大号天地'
				},
				{
					operator: '全职配货吕琼燕',
					createTime: '2025-07-31 23:17:15',
					identity: '配货员',
					content:'天地盖大号天地盖大号天地盖大号天地'
				},
				{
					operator: '全职配货吕琼燕',
					createTime: '2025-07-31 23:17:15',
					identity: '配货员',
					content:'增加数量'
				},
				{
					operator: '全职配货吕琼燕',
					createTime: '2025-07-31 23:17:15',
					identity: '配货员',
					content:'增加数量'
				},
				{
					operator: '全职配货吕琼燕',
					createTime: '2025-07-31 23:17:15',
					identity: '打包员',
					content:'增加数量'
				},
				{
					operator: '全职配货吕琼燕',
					createTime: '2025-07-31 23:17:15',
					identity: '打包员',
					content:'增加数量'
				},
				{
					operator: '全职配货吕琼燕',
					createTime: '2025-07-31 23:17:15',
					identity: '打包员',
					content:'天地盖大号天地盖大号天地盖大号天地'
				},
			]
		}, 1000)
	}
	
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
	._wrap{
		padding: 0 24rpx 24rpx;
	}
	.flower_info{
		padding: 0 24rpx 24rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 24rpx;
		font-size: 28rpx;
		.title{
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 24rpx;
		}
		.info{
			font-size: 24rpx;
			color: #999;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 24rpx;
			.grade{
				color: #F5564D;
			}
		}
	}
	.shelf_number_text{
		padding: 24rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 24rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
	// 表格区域
	.table-section {
		.table-header {
			padding: 0 24rpx;
			display: flex;
			background: #FFF4E6;
			height: 67rpx;
			align-items: center;
			border-radius: 12rpx;
			margin-top: 24rpx;
	
			.header-cell {
				font-size: 24rpx;
				color: #EC6F15;
	
				&.operator {
					flex: 2;
				}
	
				&.identity {
					flex: 1;
					text-align: center;
				}
	
				&.content {
					flex: 1.5;
					text-align: center;
				}
			}
		}
	
		.table-body {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 24rpx;
			margin-top: 12rpx;
			.table-row {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #F2F2F2;
				position: relative;
				&:last-child {
					border-bottom: none;
				}
				.table-cell {
					font-size: 24rpx;
					color: #666666;
					&.operator {
						flex: 2;
						justify-content: flex-start;
						gap: 8rpx;
						white-space: nowrap;
						overflow: hidden;
						.operatorName {
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							min-width: 0;
						}
						.createTime{
							color: #999;
							padding-top: 15rpx;
						}
					}
	
					&.identity {
						flex: 1;
						text-align: center;
					}
	
					&.content {
						flex: 1.5;
						text-align: center;
					}
				}
			}
		}
		.no_data{
			padding-top: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
	}
</style>
